<demo>
支持 loading
</demo>
<template>
  <div>
     <section class="second-title">
      <p>使用<span>loading</span>属性表示<span>Button</span>组件正在加载</p>
    </section>
    <section class="second-demos">
      <Button loading>加载中</Button>
      <Button>加载完毕</Button>
    </section>
  </div>
</template>

<script lang="ts">
import Button from "../lib/Button.vue";
export default {
  components: { Button },
  setup() {
    const onClick = () => {
      console.log("oclick");
    };
    return { onClick };
  },
};
</script>
<style lang="scss" scoped>
.first-title {
  font-size: 1.5em;
  margin-bottom: 20px;
}
.second-title {
  > h1 {
    position: relative;
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  > p {
    font-size: 0.9em;
    margin-bottom: 20px;
    > span {
      font-weight: 700;
      color: rgb(255, 31, 31);
      font-size: 20px;
      margin: 0 10p;
    }
  }
}
.second-demos {
  border-radius: 5px;
  margin: 0px 0 0px 0px;
  max-width: 100%;
  padding: 15px;
  background-color: #fafafa;
  border: 1px solid #eaeefb;
  > button {
    margin: 15px;
  }
}
</style>
